<template>
	<!-- 部门报表 -->
	<div style="height: 100%;">
		<el-table
			ref="tableRef"
			v-loading="tableLoading"
			:summary-method="customSummaryMethod"
			row-key="dept_id"
			:show-summary="true"
			:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
			height="100%"
			stripe
			:data="tableData"
		>
			<template v-for="(colums, index) in tableColums">
				<el-table-column
					:type="colums.type"
					:fixed="colums.fixed"
					:width="colums.width"
					:minWidth="colums.minWidth"
					:prop="colums.prop"
					:label="colums.label"
					:showOverflowTooltip="colums.showOverflowTooltip"
					:formatter="colums.formatter"
					:sortable="colums.sortable"
				></el-table-column>
			</template>
		</el-table>
		<PopSelect ref="popSelectRef" @resetSearch="resetSearch" />
	</div>
</template>

<script>
import PopSelect from "./popSelect.vue";
import { Table, TableColumn } from "element-ui";
import dayjs from "dayjs";
export default {
	components: {
		ElTable: Table,
		ElTableColumn: TableColumn,
		PopSelect
	},
	data() {
		return {
			tableData: [],
			search: {
				begin_time: dayjs().format("YYYY-MM-DD"),
				end_time: dayjs().format("YYYY-MM-DD"),
				biz_id: "", //事业部
				company_id: "", //公司
				dept_ids: []
			},
			tableColums: [
				// {
				//   type: "index",
				//   label: "序号",
				//   align: "center",
				//   width: 50,
				//   fixed: true,
				//   disable: true
				// },
				{
					label: "部门",
					prop: "dept_name",
					width: 120,
					align: "left",
					showOverflowTooltip: true,
					fixed: true
				},
				{
					label: "姓名",
					prop: "title",
					minWidth: 120,
					align: "left",
					showOverflowTooltip: true
				},
				{ label: "加微数", prop: "wechat", sortable: false, minWidth: 130 },
				{
					label: "实际定金人数",
					prop: "deposit_actually_person",
					sortable: false,
					minWidth: 150
				},
				{
					label: "实际定金数",
					prop: "deposit_actually",
					sortable: false,
					minWidth: 150
				},
				{
					label: "实际定金率（人）",
					prop: "deposit_rate_actually",
					sortable: false,
					minWidth: 170,
					formatter: row => `${row.deposit_rate_actually}%`
				},
				{
					label: "0定金到店数",
					prop: "no_deposit_arrive",
					sortable: false,
					minWidth: 150
				},
				{
					label: "排客人数",
					prop: "plan_arrive",
					sortable: false,
					minWidth: 170
				},
				{
					label: "流失人数",
					prop: "lost",
					sortable: false,
					minWidth: 170
				},
				{
					label: "新客到店人头数",
					prop: "arrive_person",
					sortable: false,
					minWidth: 160
				},
				{
					label: "新客到店率",
					prop: "deposit_arrive_radio",
					sortable: false,
					minWidth: 120
				},
				{ label: "定金人数", prop: "deposit_person", sortable: false, minWidth: 120 },
				{
					label: "新客定金人数",
					prop: "deposit_new_person",
					sortable: false,
					minWidth: 150
				},
				{
					label: "定金率（人）",
					prop: "deposit_rate",
					sortable: false,
					minWidth: 140,
					formatter: row => `${row.deposit_rate}%`
				},
				{
					label: "加微到店率",
					prop: "wechat_arrive_radio",
					sortable: false,
					minWidth: 120,
					formatter: row => `${row.wechat_arrive_radio}%`
				},
				{ label: "到店人数", prop: "total_arrived", sortable: false, minWidth: 120 },
				{
					label: "新客业绩（￥）",
					prop: "achieve_new_customer",
					sortable: false,
					minWidth: 150
				},
				{
					label: "老转新业绩（￥）",
					prop: "achieve_old_new",
					sortable: false,
					minWidth: 200
				},
				{
					label: "新客到店客单（￥）",
					prop: "arrive_person_price",
					sortable: false,
					minWidth: 190
				}
			],
			tableLoading: true
		};
	},
	created() {
		this.search.biz_id = this.getCurrBiz();
		this.getList();
	},
	mounted() {},
	methods: {
		async getList() {
			this.tableLoading = true;
			let res = await this.$service.preSale.reportDeptTree({ ...this.search });
			// console.log(res);
			this.tableData = res.data;
			this.$nextTick(() => {
				// 强刷页面
				this.$refs.tableRef.doLayout();
				this.tableLoading = false;
			});
		},
		openSearch() {
			this.$refs.popSelectRef.open();
			this.$nextTick(() => {
				this.$refs.popSelectRef.setData(this.search);
			});
		},
		resetSearch(data) {
			this.search = { ...this.search, ...data };
			this.getList();
		},
		customSummaryMethod({ columns, data }) {
			const sums = [];

			columns.forEach((column, index) => {
				if (index === 0) {
					sums[index] = "合计";
					return;
				}

				const prop = column.property;

				const values = data.map(item => Number(item[prop]));

				if (values.every(isNaN)) {
					sums[index] = "";
				} else {
					if (
						["deposit_rate_actually", "deposit_rate", "wechat_arrive_radio"].includes(
							prop
						)
					) {
						const total = values.reduce(
							(acc, val) => (isNaN(val) ? acc : acc + val),
							0
						);
						sums[index] = total + "%";
					} else {
						const total = values.reduce(
							(acc, val) => (isNaN(val) ? acc : acc + val),
							0
						);
						sums[index] = total;
					}
				}
			});
			return sums;
		}
	}
};
</script>
<style scoped lang="scss"></style>
